---
import CommonRight from '../common/CommonRight.astro';
---
<CommonRight>
      <!-- 用户 -->
      <div class="shrink-0 max-xl:mx-0 ml-2 mb-2 overflow-hidden rounded-lg">
          <div class="columns-2xs dark:text-white bg-white dark:bg-gray-800 dark:border-gray-700">
              <div class="w-full  max-w-sm rounded-lg">
                  <div class="flex justify-end px-4 pt-4">
                      <button id="dropdownButton" data-dropdown-toggle="dropdown"
                          class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
                          type="button">
                          <span class="sr-only">Open dropdown</span>
                          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                              fill="currentColor" viewBox="0 0 16 3">
                              <path
                                  d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z" />
                          </svg>
                      </button>
                      <!-- Dropdown menu -->
                      <div id="dropdown"
                          class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
                          <ul class="py-2" aria-labelledby="dropdownButton">
                              <li>
                                  <a href="#"
                                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Edit</a>
                              </li>
                              <li>
                                  <a href="#"
                                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Export
                                      Data</a>
                              </li>
                              <li>
                                  <a href="#"
                                      class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete</a>
                              </li>
                          </ul>
                      </div>
                  </div>
                  <div class="flex flex-col items-center pb-10">
                      <img class="w-24 h-24 mb-3 rounded-full shadow-lg"
                          src="/docs/images/people/profile-picture-3.jpg" alt="Bonnie image" />
                      <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
                      <span class="text-sm text-gray-500 dark:text-gray-400">Visual Designer</span>
                      <div class="flex mt-4 xl:mt-6">
                          <a href="#"
                              class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add
                              friend</a>
                          <a href="#"
                              class="py-2 px-4 ms-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Message</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
       
      <!-- 目录id="article-catalog" -->
      <div class="shrink-0 tocbot-wrapper  max-xl:mx-0 ml-2 mb-2 overflow-auto rounded-lg max-h-[100vh-70px]" >
           <div class="toc columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700" id="article-catalog">

           </div>
      </div>

      <!-- 站点通告 -->
      <div class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg">
          <div class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700">
              <svg class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                  <path
                      d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
              </svg>
              <a href="#">
                  <h5 class="mb-2 text-2xl  font-semibold tracking-tight text-gray-900 dark:text-white">Need a
                      help
                      in Claim? step by step guideline</h5>
              </a>
              <span class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline
                  process on how to certify for your weekly benefits:</span>
              <br>
              <a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
                  See our guideline
                  <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true"
                      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
                  </svg>
              </a>
          </div>

      </div>
       
      <!-- 文章列表 -->
      <div class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg">
          <div class="columns-2xs bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700">
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full  transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full   transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full  transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full   transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full  transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full   transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full  transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>
              <div class="m-2 overflow-hidden rounded-lg">
                  <a>
                      <img class="h-40 w-full   transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                          src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg">
                  </a>
              </div>

          </div>
      </div>
       
      <!-- 文章推荐 -->
      <div class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg">
          <div class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700">
              <div class="flex justify-between ">
                  <h3 class="font-bold text-base"> Peaple You might know </h3>
                  <button type="button">
                      <ion-icon name="sync-outline" class="text-xl xl hydrated" role="img"
                          aria-label="sync outline"></ion-icon>
                  </button>
              </div>
              <div class="space-y-4 capitalize text-xs font-normal mt-5 mb-2 text-gray-500 dark:text-white/80">
                  <div class="flex items-center gap-3">
                      <a href="timeline.html">
                          <img src="assets/images/avatars/avatar-7.jpg" alt=""
                              class="bg-gray-200 rounded-full w-10 h-10">
                      </a>
                      <div class="flex-1">
                          <a href="timeline.html">
                              <h4 class="font-semibold text-sm text-black dark:text-white"> Johnson smith</h4>
                          </a>
                          <div class="mt-0.5"> Suggested For You </div>
                      </div>
                      <button type="button" class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery">
                          Follow </button>
                  </div>
                  <div class="flex items-center gap-3">
                      <a href="timeline.html">
                          <img src="assets/images/avatars/avatar-5.jpg" alt=""
                              class="bg-gray-200 rounded-full w-10 h-10">
                      </a>
                      <div class="flex-1">
                          <a href="timeline.html">
                              <h4 class="font-semibold text-sm text-black dark:text-white"> James Lewis</h4>
                          </a>
                          <div class="mt-0.5"> Followed by Johnson </div>
                      </div>
                      <button type="button" class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery">
                          Follow </button>
                  </div>
                  <div class="flex items-center gap-3">
                      <a href="timeline.html">
                          <img src="assets/images/avatars/avatar-2.jpg" alt=""
                              class="bg-gray-200 rounded-full w-10 h-10">
                      </a>
                      <div class="flex-1">
                          <a href="timeline.html">
                              <h4 class="font-semibold text-sm text-black dark:text-white"> John Michael</h4>
                          </a>
                          <div class="mt-0.5"> Followed by Monroe </div>
                      </div>
                      <button type="button" class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery">
                          Follow </button>
                  </div>
                  <div class="flex items-center gap-3">
                      <a href="timeline.html">
                          <img src="assets/images/avatars/avatar-3.jpg" alt=""
                              class="bg-gray-200 rounded-full w-10 h-10">
                      </a>
                      <div class="flex-1">
                          <a href="timeline.html">
                              <h4 class="font-semibold text-sm text-black dark:text-white"> Monroe Parker</h4>
                          </a>
                          <div class="mt-0.5"> Suggested For You </div>
                      </div>
                      <button type="button" class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery">
                          Follow </button>
                  </div>
                  <div class="flex items-center gap-3">
                      <a href="timeline.html">
                          <img src="assets/images/avatars/avatar-4.jpg" alt=""
                              class="bg-gray-200 rounded-full w-10 h-10">
                      </a>
                      <div class="flex-1">
                          <a href="timeline.html">
                              <h4 class="font-semibold text-sm text-black dark:text-white"> Martin Gray</h4>
                          </a>
                          <div class="mt-0.5"> Suggested For You </div>
                      </div>
                      <button type="button" class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery">
                          Follow </button>
                  </div>
              </div>
          </div>
      </div>
     
      <!-- 站点信息 -->
      <div class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg">
          <div class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700">
              <div class="">
                  <h2 class="mb-2 flex items-center text-lg font-semibold  "><svg class="w-6 h-6"
                          aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                          viewBox="0 0 24 24">
                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                              stroke-width="2" d="M4 4v15a1 1 0 0 0 1 1h15M8 16l2.5-5.5 3 3L17.273 7 20 9.667" />
                      </svg><span>站点信息</span>
                  </h2>
                  <ul class="ml-2 max-w-xl space-y-1  list-disc list-insid">
                      <li class="flex justify-between mr-8">
                          <span>文章数目:</span><span>99</span>
                      </li>
                      <li class="flex justify-between mr-8">
                          <span>运行时间:</span><span>99</span>
                      </li>
                      <li class="flex justify-between mr-8">
                          <span>最后更新时间:</span><span>99</span>
                      </li>
                      <li class="flex justify-between mr-8">
                          <span>最后更新时间:</span><span>99</span>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
      
      <!-- 底部信息 -->
      <div class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg">
          <footer class="dark:text-white bg-white dark:bg-gray-800 dark:border-gray-700">
              <div class="w-full p-4 xl:py-4">
                  <div>
                      <a href="https://flowbite.com/"
                          class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
                          <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
                          <span
                              class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
                      </a>
                      <div class="grid justify-items-stretch mt-2">
                          <button type="button"
                              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
                          <button type="button"
                              class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Alternative</button>
                          <button type="button"
                              class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Dark</button>
                          <button type="button"
                              class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Light</button>
                          <button type="button"
                              class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Green</button>
                          <button type="button"
                              class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Red</button>
                          <button type="button"
                              class="focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900">Yellow</button>
                      </div>

                  </div>
                  <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
                  <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a
                          href="https://flowbite.com/" class="hover:underline">Flowbite™</a>. All Rights
                      Reserved.</span>
              </div>
          </footer>
      </div>
</CommonRight>


